import React, { Component } from 'react';
import Taro from '@tarojs/taro';
import {AtForm, AtInput} from "taro-ui";
import {View} from '@tarojs/components'
import GzhAuth from "../../../components/gzh-auth/gzh-auth"
import {GetRequest, vcmonitor} from "../../../utils/tools";
import {INVOICE_ORDER_TITLE_DETAIL, INVOICE_ORDER_TITLE_SAVE_UPDATE, TARO_ENV} from "../../../constants/api";
import {http} from "../../../utils/http";
import RadioGrounp from "../../productForm/components/radio-gounp";
import './invoice.scss'

interface StateType {
  info: any
  headType: any
  setDefault: any
}

export default class Invoice extends Component {
  state: StateType = {
    info: {
      invoicetitle_type: 0,
      invoicetitle_name: '',
      unit_id_number: '',
      address: '',
      phone: '',
      bank: '',
      bank_account: '',
      is_default: 0
    },
    headType: [{label: '个人或事业单位', value: 0}, {label: '企业', value: 1}],
    setDefault: [{label: '', value: 1}]
  }

  id

  async UNSAFE_componentWillMount() {
    vcmonitor(this)
    this.id = Taro.getCurrentInstance().router.params.id || ''
    let {info} = this.state
    if (this.id) {
      const data = await http.HGet(INVOICE_ORDER_TITLE_DETAIL, {id: this.id})
      info = this.jiaoji(info, data.data)
      info.id = this.id
    }
    this.setState({info})
  }

  async componentDidShow() {

  }

  jiaoji(a, b) {
    const c = {}
    for (const item in a) {
      if (b[item] !== undefined && b[item] !== null) {
        c[item] = b[item]
      } else {
        c[item] = a[item]
      }
    }
    return c
  }

  async confirmRequest() {
    const params = Object.assign({}, this.state.info)
    const res = await http.HPost(INVOICE_ORDER_TITLE_SAVE_UPDATE, params)
    if (res) {
      Taro.showToast({title: '保存成功', duration: 2000})
      setTimeout(() => {
        Taro.navigateBack({delta: 1})
      }, 2000)
    }
  }

  handleChange(field, val) {
    const {info} = this.state
    if (field === 'is_default'){
      if (val === info[field]){
        val = val === 0 ? 1 : 0
      }
    }
    info[field] = val
    this.setState({info})
  }

  render() {
    const {info, headType, setDefault} = this.state
    return (
      <View className='Invoice-Information-order'>
        <GzhAuth />
          <AtForm customStyle='background: initial'>
            <View className='form-wrapper' style='background: #fff;'>
              <View className='check_radio_wrapper check_radio_wrapper-loop-up-type'>
                <View className={`business-form-block-item-left ${TARO_ENV + 'business-form-block-item-left'}`}>
                  抬头类型
                </View>
                <View>
                  <RadioGrounp
                    onChange={({value}) => this.handleChange('invoicetitle_type', value)}
                    data={headType}
                    wNo
                    iconSize='20'
                    scrollWrap
                    isCheck={info.invoicetitle_type}
                    size='14px'
                  />
                </View>
              </View>
              <AtInput
                name='invoicetitle_name'
                title='抬头名称'
                type='text'
                placeholder='抬头名称或极速开票六位代码'
                value={info.invoicetitle_name}
                onChange={this.handleChange.bind(this, 'invoicetitle_name')}
              />
              {!!info.invoicetitle_type && <AtInput
                name='unit_id_number'
                title='税号'
                type='text'
                placeholder='纳税人识别号或社会统一信用代码'
                value={info.unit_id_number}
                onChange={this.handleChange.bind(this, 'unit_id_number')}
              />}
            </View>
            {!!info.invoicetitle_type && <View style='margin-top: 10px;background: #fff;border-radius: 6px;'>
              <AtInput
                name='bank'
                title='开户银行'
                type='text'
                placeholder='选填'
                value={info.bank}
                onChange={this.handleChange.bind(this, 'bank')}
              />
              <AtInput
                name='bank_account'
                title='银行账号'
                type='text'
                placeholder='选填'
                value={info.bank_account}
                onChange={this.handleChange.bind(this, 'bank_account')}
              />
              <AtInput
                name='address'
                title='企业地址'
                type='text'
                placeholder='选填'
                value={info.address}
                onChange={this.handleChange.bind(this, 'address')}
              />
              <AtInput
                name='phone'
                title='企业电话'
                type='text'
                placeholder='选填'
                value={info.phone}
                onChange={this.handleChange.bind(this, 'phone')}
              />
            </View>}
            <View className='check_radio_wrapper loop-up loop-up-add' style='margin-top: 10px;background: #fff;border-radius: 6px;'>
              <View className='business-form-block-item-left'>
                设为默认
              </View>
              <View className='check_radio_wrapper-right check_radio_wrapper-right-icon'>
                <RadioGrounp
                  onChange={({value}) => this.handleChange('is_default', value)}
                  data={setDefault}
                  wNo
                  iconSize='20'
                  scrollWrap
                  isCheck={info.is_default}
                  size='14px'
                />
              </View>
            </View>
          </AtForm>
        <View className='confirm-invoice' onClick={this.confirmRequest.bind(this)}>完成</View>
      </View>
    )
  }
}
